<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="8">
          <NewCard title="问题列表">
            <template>
              <div class="leftTable">
                <div class="leftSearch">
                  <el-popover placement="bottom" width="160">
                    <el-input
                      v-model="searchIssueText"
                      size="mini"
                      clearable
                      @blur="searchIssue"
                      placeholder="输入关键字搜索"
                    />
                    <el-button
                      slot="reference"
                      icon="el-icon-search"
                      circle
                    ></el-button>
                  </el-popover>
                </div>

                <el-table
                  :data="waitingList"
                  :default-sort="{ prop: 'remaTime', order: 'ascending' }"
                  :highlight-current-row="highlight"
                  :height="tableHeight"
                  @row-click="onRowClick"
                  style="width: 100%"
                  ref="probTable"
                >
                  <el-table-column label="标题" width="70%" prop="title">
                  </el-table-column>
                  <el-table-column
                    label="剩余时间"
                    width="30%"
                    prop="remaTime"
                    sortable
                  >
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </NewCard>
        </el-col>
        <el-col :span="8">
          <NewCard title="订单详情">
            <div class="lineItem">
              <div class="replyCount">
                回复剩余时间：<i>{{
                  `${timesRem.h}:${timesRem.m}:${timesRem.s}`
                }}</i>
              </div>
              <h2 v-show="selectRow.question" class="el-icon-menu">
                {{ selectRow && selectRow.question }}
              </h2>
              <span v-show="selectRow.createTime" class="el-icon-time">
                {{ selectRow && selectRow.createTime }}</span
              >
              <div class="accessory">
                <p
                  v-for="(item, index) in selectRow.files"
                  :key="index"
                  v-show="selectRow.files"
                  class="el-icon-picture"
                >
                  <a style="color: blue" :href="item">附件{{ index }}</a>
                </p>
              </div>
              <div
                v-for="(answersItem, answersIndex) in selectRow.answers"
                class="lItemContent"
                :key="answersIndex"
              >
                <!-- 评论组件 -->
                <AwearItem :item="answersItem"></AwearItem>
              </div>
              <p v-for="(fileItem, index) in selectRow.file" :key="index">
                <a :href="fileItem.url"></a>
              </p>

              <!-- <div class="lItemContent el-icon-chat-line-square">
                用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问
              </div> -->
            </div>
          </NewCard>
        </el-col>
        <el-col :span="8" :class="{ byTwoThirds: byTwoThirdsClass }">
          <NewCard title="正式回复">
            <div class="formalReply">
              <!-- 宽度扩大至3/2 -->
              <i
                class="expWidth"
                :class="[
                  { 'el-icon-arrow-left': isLeft },
                  { 'el-icon-arrow-right': isRight },
                ]"
                @click="clickbyTwoThirds"
              ></i>

              <!-- <WangEditor ref="wangEditor" :list="[]"></WangEditor> -->
              <!-- <Editor style="height: 100%"></Editor> -->
              <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入内容"
                v-model="textarea"
              >
              </el-input>

              <div class="queryBtn">
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="primary" @click="submitAC"
                  >提交并继续</el-button
                >
              </div>

              <div class="otherBtn">
                <el-button type="primary" @click="queryLibrary = true"
                  >查智库</el-button
                >
                <el-button type="primary" @click="queryLaw = true"
                  >查法条</el-button
                >
                <el-button type="primary" @click="calendarBtn = true"
                  >日历</el-button
                >
                <el-button type="primary" @click="statisticsBtn = true"
                  >统计</el-button
                >

                <!-- 查智库 -->
                <Comdrawer
                  size="95%"
                  title="查智库"
                  @eventColse="handleClose"
                  :drawer="queryLibrary"
                >
                  <div class="drawerMain">
                    <QueryLibrary></QueryLibrary>
                  </div>
                </Comdrawer>

                <!-- 查法条 -->
                <Comdrawer
                  size="70%"
                  title="查法条"
                  @eventColse="queryLawClose"
                  :drawer="queryLaw"
                >
                  <div class="drawerMain">
                    <ComGetLaw></ComGetLaw>
                  </div>
                </Comdrawer>

                <!-- 日历 -->
                <Comdrawer
                  size="60%"
                  title="日历"
                  @eventColse="calendarClose"
                  :drawer="calendarBtn"
                >
                  <div class="drawerMain">
                    <Calendar></Calendar>
                  </div>
                </Comdrawer>

                <!-- 统计 -->
                <Comdrawer
                  size="60%"
                  title="统计"
                  @eventColse="statisticsClose"
                  :drawer="statisticsBtn"
                >
                  <div class="drawerMain">
                    <Statistics></Statistics>
                  </div>
                </Comdrawer>
              </div>
            </div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import Comdrawer from "../../../components/Comdrawer.vue";
import WangEditor from "../../../components/wangEditor.vue";
import ComGetLaw from "../../../components/ComGetLaw.vue";
import QueryLibrary from "./queryLibrary.vue";
import Calendar from "./calendar.vue";
import { getConfigListConsultApi } from "@/wss/newApi_3-24/base/config.js";
import Statistics from "./statistics.vue";
import {
  getPriceCommissionListApi,
  getPriceCommissionGetInfoApi,
} from "@/wss/newApi_3-24/financial/order.js";
import { getConsultEditApi } from "@/wss/newApi_3-24/doc/consult.js";
import { getConsultInsertAnswerApi } from "@/wss/newApi_3-24/doc/consult.js";
import AwearItem from "./awearItem.vue";
export default {
  name: "consulting",
  components: {
    NewCard,
    Comdrawer,
    WangEditor,
    ComGetLaw,
    QueryLibrary,
    Calendar,
    Statistics,
    AwearItem,
  },
  data() {
    return {
      // 搜索列表问题
      searchIssueText: "",
      textarea: "",
      //待回复列表 搜索值
      filterText: "",
      //待回复列表 数据
      waitingList: [],
      //待回复列表 当前选择的数据
      selectRow: {},

      //待回复列表 搜索
      searchlist: "",
      //待回复列表 高亮
      highlight: true,
      //待回复列表 自适应表格高度
      tableHeight: 0,

      //中间回复倒计时
      timesRem: {
        timer: null,
        count: "",
        h: "02",
        m: "00",
        s: "00",
      },
      // 当前编辑的对象
      currentEdit: {},
      //正式回复
      formalReply: {},

      //正式回复 大纲的选中值
      outlineValue: "",

      //日历按钮
      calendarBtn: false,
      //统计按钮
      statisticsBtn: false,

      //查智库右侧抽屉是否显示
      queryLibrary: false,
      //查法条右侧抽屉是否显示
      queryLaw: false,
      //查法条输入内容
      queryLawValue: "",
      inquireParams: {
        pageNum: "1",
        pageSize: "10",
        title: null,
        type: 5,
      },
      //扩大三分之二的类名显示隐藏
      byTwoThirdsClass: false,
      //扩大向左图标显示隐藏
      isLeft: true,
      //扩大向右图标显示隐藏
      isRight: false,
      // 时间
      time: "",
      // 当前点击的一项
      clickItem: {},
    };
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.myOnresize);
  },
  mounted() {
    this.getConsultTypeListFn();
    //table固定表头，在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 130;
      // 监听窗口大小变化

      window.addEventListener("resize", this.myOnresize);
      // this.tableHeight =
      //   window.innerHeight - this.$refs.table.$el.offsetTop - 130;
      // // 监听窗口大小变化
      // let self = this;

      // window.onresize = function () {5
      //   // console.log(self);
      //   self.tableHeight =
      //     window.innerHeight - self.$refs.table.$el.offsetTop - 130;
      // };
    });
  },
  async created() {
    console.log(this.$route);
    this.getPriceCommissionListFn();
    await this.getConfigListConsultFn();
    this.countTime(); //定时器
    // this.setCurrent(); //左边默认选中第一行
  },
  methods: {
    myOnresize() {
      const self = this;
      self.tableHeight =
        window.innerHeight - self.$refs.table.$el.offsetTop - 130;
    },
    async getConfigListConsultFn() {
      let { code, data } = await getConfigListConsultApi({
        name: "问题有效期限（小时）",
      });
      if (code != 200) return;
      this.time = data[0].value;
    },
    // 回复
    async submit() {
      const currentEdit = this.currentEdit;
      if (!currentEdit.goodsId) {
        this.$message({
          type: "warning",
          message: "请选择咨询订单",
        });
        return;
      }

      let form = new FormData();
      form.append("consultId", currentEdit.goodsId);
      form.append("answer", this.textarea);
      if (currentEdit?.goods.answers[0]?.id) {
        form.append("answerId", currentEdit?.goods.answers[0]?.id);
      }
      form.append("law[0].id", 123);
      form.append("law[0].itemId", 123_1);
      form.append("law[0].title", "民法典");
      form.append("law[0].content[0]", "第一条 xxx");

      //  "law":[{
      //       "id":"123",
      //       "itemId":"123_1",
      //       "title":"民法典",
      //       "content":["第一条 xxx"，"xxxxxx"]
      //   }]
      // let editParams = {
      //   consultId: this.currentEdit.id,
      //   answer: this.textarea,
      // };
      let { code, msg } = await getConsultInsertAnswerApi(form);

      if (code != 200) return;
      this.textarea = "";
      this.$message({
        type: "success",
        message: msg,
      });
      await this.getPriceCommissionListFn();
      this.onRowClick(this.clickItem);
      return;
      const _this = this;
      let { answers } = _this.currentEdit.goods;
      console.log(answers, "赶紧起来");
      let paramsObj = {
        expertId: 1518159910444568576,
        expertName: "熊二",
        content: [
          {
            answer: _this.textarea,
            createTime: new Date().toLocaleDateString(),
          },
        ],
        id:
          _this.currentEdit.id +
          "_" +
          (_this.currentEdit.goods.answers.length + 1),
      };
      answers = paramsObj;
      _this.currentEdit.goods.answers.push(paramsObj);

      // let currentEdit = _this.currentEdit;

      //  把数据转换成form格式
      for (const key in currentEdit) {
        if (typeof currentEdit[key] == "object") {
          if (key == "goods") {
            currentEdit[key].answers.forEach((item, index) => {
              console.log(item, "有没有错，不是把");
              form.append(`answers[${index}].expertId`, 1518159910444568576);
              form.append(`answers[${index}].expertName`, "熊二");
              item.content.forEach((v, i) => {
                form.append(`answers[${index}].content[${i}].answer`, v.answer);
                form.append(
                  `answers[${index}].content[${i}].createTime`,
                  v.createTime
                );
              });
            });
          }

          // formDate.set(key, JSON.stringify(selectExpertInfo[key]), "blob");
          // formDate.set(key, selectExpertInfo[key]);
        } else {
          form.set(key, currentEdit[key]);
        }
      }

      let res = await getConsultEditApi(form);
    },
    // 新增并继续
    submitAC() {},
    // 搜索问题列表
    searchIssue() {
      const _this = this;
      _this.inquireParams.title = _this.searchIssueText;
      _this.getPriceCommissionListFn();
    },
    async getPriceCommissionListFn() {
      const _this = this;
      let { code, rows } = await getPriceCommissionListApi(_this.inquireParams);
      if (code != 200) return;
      // console.log(rows);
      _this.waitingList = JSON.parse(JSON.stringify(rows));
    },
    //左边默认选中表格数据的第一行
    setCurrent() {
      this.$nextTick(() => {
        this.$refs.probTable.setCurrentRow(this.waitingList[0]);
        this.selectRow = this.waitingList[0];
      });
    },
    // 选择订单
    async onRowClick(row) {
      const _this = this;
      this.clickItem = JSON.parse(JSON.stringify(row));
      let { code, data } = await getPriceCommissionGetInfoApi({ id: row.id });
      if (code != 200 || !data) return;

      _this.selectRow = JSON.parse(JSON.stringify(data.goods || {}));
      _this.currentEdit = JSON.parse(JSON.stringify(data));
    },

    //查智库 显示隐藏
    handleClose() {
      this.queryLibrary = false;
    },
    //查法条 显示隐藏
    queryLawClose() {
      this.queryLaw = false;
    },
    //日历 显示隐藏
    calendarClose() {
      this.calendarBtn = false;
    },
    //统计 显示隐藏
    statisticsClose() {
      this.statisticsBtn = false;
    },

    //中间倒计时
    countTime() {
      //定义两个小时的秒数，此处根据需要进行定义
      const time = this.time * 60 * 60;
      console.log(time, "搞定了");
      if (!this.timesRem.timer) {
        this.timesRem.count = time;
        this.timesRem.timer = setInterval(() => {
          if (this.timesRem.count > 0 && this.timesRem.count <= time) {
            this.timesRem.count--;
            const h = parseInt(this.timesRem.count / (60 * 60));
            const m = parseInt((this.timesRem.count / 60) % 60);
            const s = parseInt(this.timesRem.count % 60);
            if (
              this.timesRem.h === 0 &&
              this.timesRem.m === 0 &&
              this.timesRem.s === 0
            ) {
              this.$message({
                message: "回复时间已到!",
                type: "warning",
              });
            } else {
              this.timesRem.h = h > 9 ? h : "0" + h;
              this.timesRem.m = m > 9 ? m : "0" + m;
              this.timesRem.s = s > 9 ? s : "0" + s;
            }
          } else {
            clearInterval(this.timesRem.timer);
            this.timesRem.timer = null;
          }
        }, 1000);
      }
    },
    //倒计时 end

    //右侧扩大宽度
    clickbyTwoThirds() {
      this.byTwoThirdsClass = !this.byTwoThirdsClass;
      this.isLeft = !this.isLeft;
      this.isRight = !this.isRight;
    },
  },
};
</script>

<style scoped>
.label-box-content {
  height: 100%;
}
.label-box-content >>> .top::after {
  height: 1px;
}
.el-row {
  height: 100%;
}
.el-card {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body {
  height: 100%;
}
.el-card >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.el-card >>> .top h1 {
  margin: 20px 0 15px 0;
}
/* 左侧待回复列表 */
.el-card__body {
}
.el-table >>> .el-table__empty-block {
  width: 100% !important;
}
.el-table >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
}
.el-table >>> tr {
  border-radius: 4px;
  overflow: hidden;
  margin: 5px 0;
}
.leftTable .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.el-table >>> table {
  width: 100% !important;
  table-layout: fixed !important;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #1890ff;
  color: #fff;
}
.el-table >>> .el-table__header-wrapper {
  margin: 6px 0;
}
.el-table >>> .el-table__header-wrapper th,
.el-table >>> .el-table__fixed-header-wrapper th {
  background-color: #f8f8f8 !important;
  padding: 0;
}
.el-table >>> th.is-leaf,
.el-table >>> td {
  border-bottom: 0;
  padding: 10px 0;
}
.el-table >>> th.is-leaf {
  padding: 4px 0;
}
.el-table--scrollable-x .el-table__body-wrapper {
}
.el-table::before {
  height: 0;
}

/* 中间订单详情 */
.lineItem {
  margin-bottom: 60px;
}
.lineItem h2 {
  font-size: 20px;
}
.lineItem h2::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem > span {
  display: block;
  font-size: 15px;
  color: #aaa;
}
.lineItem span::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .accessory {
  margin-top: 15px;
}
.lineItem .accessory p {
  display: block;
  font-size: 14px;
  color: #666;
  margin: 15px 0;
}
.lineItem .accessory p::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .lItemContent {
  font-size: 14px;
  margin-top: 10px;
  line-height: 26px;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 10px;
}
/* .lineItem .lItemContent::before {
  font-size: 16px;
  color: #aaa;
} */
.lineItem .lItemContent > .lICon-reply {
  padding-left: 1em;
  font-size: 14px;
  color: #888;
  margin-top: 10px;
}
.lineItem .lItemContent > .lICon-reply > span {
  font-size: 14px;
  display: inline-block;
}
.lineItem .el-input {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
.lineItem .el-input >>> input {
  border: 0;
  height: 46px;
  line-height: 46px;
}

.replyCount {
  position: absolute;
  top: 10px;
  right: 20px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.replyCount i {
  display: block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 13px;
  border-radius: 4px;
  background-color: #f56c6c;
  color: #fff;
  font-style: normal;
}

/* 右侧 正式回复 */
.el-form {
  margin-bottom: 80px;
}
.expWidth {
  position: absolute;
  left: 0;
  top: 48%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.el-col {
  transition: all 0.3s;
}
::v-deep .el-drawer__header {
  border-bottom: 0;
}
.el-card >>> .ql-toolbar.ql-snow {
  border: 1px solid #e6ebf5;
}
.el-card >>> .ql-container.ql-snow {
  border: 1px solid #e6ebf5;
  border-top: 0;
}
.byTwoThirds {
  position: absolute;
  right: 0;
  width: 67%;
  height: 100%;
}
.formalReply {
  height: 70%;
}
.formalReply .el-select {
  width: 100%;
  margin-bottom: 20px;
}
.formalReply >>> .w-e-text {
  padding: 0 1em;
}
.formalReply >>> .placeholder {
  margin-left: 0.5em;
}
.queryBtn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e6ebf5;
  z-index: 99999;
}
.queryBtn .el-button {
  width: 49.9%;
  margin: 0;
  border-radius: 0;
}
.queryBtn .el-button--medium {
  padding: 15px 20px;
}

.drawerMain {
  height: 100%;
  padding: 0 30px 30px 30px;
}
.drawerMain >>> .el-col {
  height: 100%;
}
.drawerMain >>> .dracon {
  height: 100%;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #ffffff;
  padding: 20px;
}
.drawerMain >>> .dracon .draconTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drawerMain .dracon i {
  font-style: normal;
}
.queryLibDetail h3 {
  margin-top: 8px;
}
.queryLibDetail p {
  font-size: 16px;
  line-height: 26px;
}

.otherBtn {
  position: absolute;
  right: 20px;
  top: 10px;
}
.otherBtn >>> .el-drawer__wrapper {
  z-index: 99999 !important;
}
.otherBtn .el-button {
  padding: 8px 10px;
  font-size: 13px;
  margin-left: 3px;
}
</style>